<style lang="less">
// 占位div样式
.left-div {
  visibility: hidden;
  border-style: solid;
  border-color: black;
  /* border-right-color: red; */
  border-color: transparent;
}
// 内容部分
.content-wrapper {
  margin: 0px 10px 0px 0px;
  .card-request-item {
    margin: 0px 0px 10px 0px;
    .ivu-card-body {
      padding: 10px;
    }
    // 提问者
    .request-user {
      color: #808695;
      font-size: 12px;
    }
    // 问题标题
    .request-title {
      margin-top: 3px;
      a {
        font-size: 16px;
        font-family: "PingFang SC";
        font-weight: bold;
        color: #464c5b;
      }
      a:hover {
        color: #2b85e4;
      }
      // a:visited {
      //   color: #c5c8ce;
      // }
    }
    // 问题回复数量
    .request-answer-count {
      text-align: right;
      color: #19be6b;
      font-size: 12px;
    }
  }
}

// 侧边栏
.right-aside {
  width: 300px;
  position: fixed;
  // 分割线的外边距 上下 距离
  .ivu-divider-horizontal {
    margin: 10px 0;
  }
  .request-option-detail {
    // margin-top: 9px;
    .ivu-form-item-label {
      font-size: 15px;
    }
    // 表单元素上下距离
    .ivu-form-item {
      margin-bottom: 10px;
    }
  }
  .request-option-button {
    margin-top: 9px;
    height: 29px;
  }
}

body {
  overflow: scroll;
}
</style>
<template>
  <div class="ora-web-index">
    <Row>
      <Col span="3" class="left-div"></Col>
      <Col span="18">
        <Row>
          <Col span="18">
            <div class="content-wrapper">
              <!-- 内容 -->
              <div>
                <Card class="card-request-item" v-for="request in allRequestList">
                  <div class="request-user">
                    <span>{{request.userName}}&nbsp;&nbsp;{{request.createdAt}}</span>
                    <span style="float:right; ">
                      <Tooltip v-if="request.status === 1" content="还未回答">
                        <span>
                          <Badge status="warning"/>
                        </span>
                      </Tooltip>
                      <Tooltip v-else-if="request.status === 2" content="回答进行中">
                        <span>
                          <Badge status="processing"/>
                        </span>
                      </Tooltip>
                      <Tooltip v-else content="回答已采纳">
                        <span>
                          <Badge status="success"/>
                        </span>
                      </Tooltip>
                    </span>
                  </div>
                  <div class="request-title">
                    <router-link :to="'answer/'+request.tid">{{request.title}}</router-link>
                  </div>
                  <div class="request-answer-count">
                    <Tooltip :content="'共有'+request.answerCount+'条回复'">
                      <span>
                        <Icon type="ios-text-outline"/>
                        {{request.answerCount}}
                      </span>
                    </Tooltip>
                  </div>
                </Card>
              </div>
              <!-- 加载更多 -->
              <div>
                <Button long @click="loadMore">加载更多</Button>
              </div>
            </div>
          </Col>
          <!-- 右边侧边栏 -->
          <Col span="5">
            <div class="right-aside">
              <Affix :offset-top="50">
                <div v-if="isLogin">
                  <Card>
                    <p slot="title">问题选项</p>
                    <Form :model="conditionForm" label-position="top" ref="conditionForm">
                      <div>
                        <div class="request-option-detail">
                          <FormItem label="问题状态">
                            <RadioGroup v-model="conditionForm.status">
                              <Radio label="0">全部</Radio>
                              <Radio label="1">未回答</Radio>
                              <Radio label="2">回答中</Radio>
                              <Radio label="3">已采纳</Radio>
                            </RadioGroup>
                          </FormItem>
                        </div>
                      </div>
                      <Divider/>
                      <div style=" margin-top: 9px;">
                        <div class="request-option-detail">
                          <FormItem label="问题">
                            <Input v-model="conditionForm.title" placeholder="请输入要查找问题的关键字"></Input>
                          </FormItem>
                        </div>
                      </div>
                      <!-- <Divider/> -->
                      <Collapse v-model="loadMoreValue">
                        <Panel name="1">
                          更多
                          <div slot="content">
                            <div>
                              <div class="request-option-detail">
                                <FormItem label="专业">
                                  <Select
                                    v-model="conditionForm.professionIds"
                                    placeholder="请选择专业"
                                    multiple
                                    filterable
                                  >
                                    <Option
                                      v-for="profession in professionList"
                                      :value="profession.tid"
                                    >{{profession.proName}}</Option>
                                  </Select>
                                </FormItem>
                              </div>
                            </div>
                            <div>
                              <div class="request-option-detail">
                                <FormItem label="课程">
                                  <Select
                                    v-model="conditionForm.courseIds"
                                    placeholder="请选择课程"
                                    multiple
                                    filterable
                                  >
                                    <Option
                                      v-for="course in selectProCourseList"
                                      :value="course.tid"
                                    >{{course.courseName}}</Option>
                                  </Select>
                                </FormItem>
                              </div>
                            </div>
                          </div>
                        </Panel>
                      </Collapse>
                    </Form>
                    <div class="request-option-button">
                      <Button type="info" style="float:right;" @click="search('conditionForm')">搜索</Button>
                      <Button
                        style="float:right;margin-right: 6px;"
                        @click="handleReset('conditionForm')"
                      >清空</Button>
                    </div>
                  </Card>
                  <div style="margin-top:10px">
                    <Button type="success" long @click="gotoRequest">新建提问</Button>
                  </div>
                </div>
                <Card icon="log-in" title="欢迎登录" :bordered="false" v-else>
                  <div class="form-con">
                    <login-form @on-success-valid="handleSubmit"></login-form>
                  </div>
                </Card>
              </Affix>
            </div>
          </Col>
        </Row>
      </Col>
      <Col span="3"></Col>
    </Row>
  </div>
</template>
<script>
import logo from '@/assets/images/logo.jpg'
import { getToken } from '@/libs/util'

import LoginForm from '_c/login-form'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
    LoginForm
  },
  data () {
    return {
      logo,
      // 所有问题列表
      allRequestList: [],
      current: 1,
      size: 20,
      total: -1,
      // isLogin: false,
      conditionForm: {
        status: '0'
      },
      loadMoreValue: 0,

      professionList: [],
      courseList: [],
      selectProCourseList: [],
      professionCourseRelation: []
    }
  },
  methods: {
    ...mapActions(['handleLogin', 'getUserInfo']),
    // 判断登录
    // judgeLogin() {
    //   this.isLogin = getToken() ? true : false;
    // },
    handleSubmit ({ userName, password }) {
      debugger
      this.handleLogin({ userName, password }).then(res => {
        if (res.data.code === 200) {
          this.getUserInfo().then(res => {
            // debugger;
            this.$Message.success('登陆成功')
            // this.$router.push({ name: "index" });
            // _this.isLogin()
            // this.judgeLogin();
            // window.location.reload();
          })
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },

    // 获取数据全部问题的数据
    query () {
      if (this.conditionForm.professionIds) {
        if (this.conditionForm.professionIds.length === 0) {
          delete this.conditionForm.professionIds
        }
      }
      if (this.conditionForm.courseIds) {
        if (this.conditionForm.courseIds.length === 0) {
          delete this.conditionForm.courseIds
        }
      }
      const data = {
        current: this.current,
        size: this.size,
        data: this.conditionForm
      }
      this.$httpUtil.asyncPost(
        'request_answer/request/queryByCondition',
        data,
        res => {
          if (res.data.code === 200) {
            let pageRequestList = this.allRequestList
            if (this.current === 1) {
              // 首次是全部添加
              this.allRequestList = res.data.records
            } else {
              // 从第二次开始，都是叠加
              pageRequestList.push.apply(pageRequestList, res.data.records)
            }
            this.total = res.data.total
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 加载更多数据
    loadMore () {
      let tempCount = this.current * this.size
      if (this.total === -1) {
        // 首次加载
        this.current++
        this.query()
      } else {
        if (this.total > tempCount) {
          // 还有新的一页
          this.current++
          this.query()
        } else {
          // 再无新数据
          this.$Message.warning('数据已全部加载！')
        }
      }
    },

    // 跳转的提问页面
    gotoRequest () {
      this.$router.push({ name: 'request' })
    },

    // 获取下拉框列表
    getProfessionCourseData () {
      this.$httpUtil.asyncGet(
        'admin/pc/profession/getAllProfessionCourse',
        {},
        res => {
          if (res.data.code === 200) {
            this.professionList = res.data.records.allProfession
            this.courseList = res.data.records.allCourse
            this.selectProCourseList = this.courseList
            this.professionCourseRelation = res.data.records.relation
          } else {
            this.$Message.success(res.data.msg)
          }
        }
      )
    },

    // 提交
    search (name) {
      this.query()
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields();
      (this.conditionForm = {
        status: '0'
      }),
      (this.selectProCourseList = this.courseList)
      this.query()
    },

    // 页面初始化方法
    init () {
      this.query()
      // this.judgeLogin();
      this.getProfessionCourseData()
      // this.isLogin()
      // this.getUserName()
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'getUserId', 'getUserName'])
  },
  watch: {},
  mounted () {
    this.init()
  }
}
</script>
